<%@ page import="com.goal98.team.Constants" %>
<div class="dialog1">
  <pw:lib/>
  <table>
    <tbody>
      <tr class="prop">
        <td valign="top" class="name"><g:message code="activity.personAttend" default="Person Attend"/>:</td>

        <td valign="top" style="text-align: left;" class="value">
          %{--<ul>
            <g:each in="${activityInstance?.personAttend}" var="personInstance">
              <li><g:link controller="person" action="show" id="${personInstance.id}">${personInstance.encodeAsHTML()}</g:link></li>
            </g:each>
          </ul>--}%
          <script type="text/javascript">
            document.observe('dom:loaded', loadPeopleAttend);


            function loadPeopleAttend() {
              var url = '${createLinkTo(dir:'/teamActivity/attendPersonAjax')}';
              var options = {
                method:'post',
                parameters:{
                  activityId:'${activityInstance.id}'
                },
                onSuccess:function(transport) {
                  $('actualPersonCount').innerHTML = transport.responseJSON.actualPersonCount;
                  $('costOfEachPerson').innerHTML = transport.responseJSON.costOfEachPerson;
                  $('peopleAttendList').innerHTML = renderAttendList(transport.responseJSON.peopleAttend);
                }

              }
              new Ajax.Request(url, options);
            }

            function renderAttendList(json) {
              var result = '<ul>';
              for (x = 0; x < json.length; x++) {
                var player = json[x]
                var costHtml = '<li>' + player.userRealName + '</li>';
                result += costHtml;
              }
              result += '</ul>';
              return result;

            }
          </script>
          <div id="peopleAttendList"></div>

        </td>

      </tr>

      <tr class="prop">
        <td valign="top" class="name"></td>
        <td valign="top" class="value">
          <script type="text/javascript">
            function open_attendPerson() {
              Dialog.confirm({url:'${createLinkTo(dir:'/teamActivity/attendPersonCheckboxes')}' + '/${activityInstance.id}'},
              {className:'alphacube',
                width:300,
                height:400,
                okLabel: "${message(code:'button.save','default':'Save') }",
                cancelLabel: "${message(code:'button.cancel','default':'Cancel')}",
                onOk:updateAttendPeople
              }
                      )
                      ;
            }
          </script>
          <g:ifAnyGranted role="${Constants.ROLE_TEAM_ADMIN}">
            <span class="button">
              <input id="open_attend_click_button" type="button" class="create"
                      onclick="open_attendPerson();" value="${message(code: 'button.update', 'default': 'Update')}"></input>
            </span>
          </g:ifAnyGranted>
          <script type="text/javascript">

            function checkAll(checked) {
              var checkboxGroup = $$('.peopleAttendCheckBox');
              for (i = 0; i < checkboxGroup.length; i++) {
                var checkbox = checkboxGroup[i];
                checkbox.checked = checked;
              }
            }

            function collectCheckedIds() {
              var checkboxGroup = $$('.peopleAttendCheckBox');
              var result = new Array();
              for (i = 0; i < checkboxGroup.length; i++) {
                var checkbox = checkboxGroup[i];
                if (checkbox.checked == true)
                  result.push(checkbox.value)
              }
              return result;
            }


            function updateAttendPeople() {
              var peopleAttendIds = collectCheckedIds();
              //              alert(Object.toJSON(peopleAttendIds));
              var url = '${createLinkTo(dir:'/teamActivity/updateAttendPeopleAjax')}';
              var options = {
                method:'post',
                parameters:{
                  activityId:${activityInstance.id},
                  peopleAttendIds:peopleAttendIds
                },
                onSuccess:function(transport) {
                  var win = Windows.focusedWindow;
                  win.updateHeight();
                  new Effect.Fade(win.getId());
                  win.close();
                  loadPeopleAttend();
                  return true;
                },
                onFailure:function(transport) {
                  alert(transport.responseText);
                }
              };
              new Ajax.Request(url, options);

              return false;
            }
          </script>


          <script type="text/javascript">
            function open_debitAttendPerson() {
              highlight($('totalCost'));
              highlight($('peopleAttendList'));
              highlight($('actualPersonCount'));
              highlight($('costOfEachPerson'));
              Dialog.confirm('${message(code:'activity.debit.confirm.message','default':'Are you sure?')}',
              {className:'alphacube',
                width:300,
                height:100,
                okLabel: "${message(code:'button.confirm','default':'Confirm') }",
                cancelLabel: "${message(code:'button.cancel','default':'Cancel')}",
                onOk:debitAttendPerson
              }
                      );
            }

            function debitAttendPerson() {
              var url = '${createLinkTo(dir:'/teamActivity/debitAttendPerson')}';
              var options = {
                method:'post',
                parameters:{
                  activityId:${activityInstance.id}
                },
                onSuccess:function(transport) {
                  var win = Windows.focusedWindow;
                  win.updateHeight();
                  new Effect.Fade(win.getId());
                  win.close();
                  $('open_debit_click_button').disable();
                  alert(transport.responseText);
                  return true;
                },
                onFailure:function(transport) {
                  alert(transport.responseText);
                }
              };
              new Ajax.Request(url, options);

              return false;

            }

            function highlight(div) {
              div.setStyle({color:'red'});
              return false;
            }
          </script>
          <g:ifAnyGranted role="${Constants.ROLE_TEAM_ADMIN}">
            <span class="button">
              <input id="open_debit_click_button" type="button" class="create"
                      onclick="open_debitAttendPerson();" ${activityInstance.doneDebit ? 'disabled' : ''}
                      value="${message(code: 'button.debitAttend', 'default': 'Debit Attend Person')}">
            </span>
          </g:ifAnyGranted>

        </td>
      </tr>


      <tr class="prop">
        <td valign="top" class="name"><g:message code="activity.actualPersonCount" default="Actual Person Count"/>:</td>

        <td valign="top" class="value">
          <div id="actualPersonCount"><g:formatNumber number="${activityInstance?.actualPersonCount}"/></div>
        </td>

      </tr>



      <tr class="prop">
        <td valign="top" class="name"><g:message code="activity.costOfEachPerson" default="Cost Of Each Person"/>:</td>

        <td valign="top" class="value">
          <div id="costOfEachPerson"><g:formatNumber number="${activityInstance?.costOfEachPerson}"/></div>
        </td>

      </tr>

    </tbody>
  </table>
</div>